클로드 코드 완벽 가이드 — 7장 클로드 코드의 3가지 모드 알아보기 딥다이브 학습 노트

출처: 클로드 코드 완벽 가이드 (코드팩토리 최지호) | 참고: https://github.com/codefactory-co

7장에서 다루는 내용

• 클로드 코드의 3가지 모드 — 일반 모드, 자동 수정 모드, 플래닝 모드의 특징과 용도
• 일반 모드 — 하나하나 확인하며 배우고 제어하고 싶을 때 사용
• 자동 수정 모드 — 반복 작업을 빠르게 처리하고 싶을 때 사용
• 플래닝 모드 — 코드 작성 전에 설계와 계획을 세울 때 사용
• 모드 전환 방법과 실전 활용 노하우 — Shift+Tab 사이클, [Yes]/[No] 선택 전략

전체 흐름도

[클로드 코드 3가지 모드]
         |
         v
+--------+--------+--------+
|        |        |        |
v        v        v        v
+----------+  +-----------+  +-----------+
| 일반 모드 |  | 자동 수정  |  | 플래닝    |
| (기본)   |  | 모드       |  | 모드      |
+----------+  +-----------+  +-----------+
|             |              |
| 수정 제안 → | 허락 없이   | 코드 작성 X
| 3가지 옵션  | 직접 수정   | 계획만 수립
| 1.Yes       |              |
| 2.Shift+Tab | Shift+Tab    | Shift+Tab
| 3.Esc       | 으로 전환    | 으로 전환
|             |              |
v             v              v
+-----------+ +-----------+ +------------------+
| 용도:     | | 용도:     | | 용도:            |
| • 학습    | | • 리네이밍| | • 설계도 작성    |
| • 디버깅  | | • 리팩터링| | • 기술 선택      |
| • 코드리뷰| | • 문서화  | | • 아키텍처 설계  |
| • 제어권  | | • 테스트  | | • 작업 분할      |
|   유지    | | • 반복작업| |                  |
+-----------+ +-----------+ +------------------+
                             |
                             v
                +-------------------------+
                | 계획 완성 후 질문:      |
                | "Would you like to      |
                |  proceed?"              |
                |                         |
                | 1. Yes → 바로 실행      |
                | 2. No, keep planning    |
                |   → 계획 강화 (추천!)   |
                +-------------------------+

선수 지식 체크리스트

• [ ] 클로드 코드 설치 및 기본 사용법 (3장)
• [ ] 터미널/CLI 기본 조작 (키보드 단축키 등)
• [ ] CLAUDE.md 개념과 콘텍스트 윈도우 이해 (6장)
• [ ] Git 기본 개념 (커밋, 브랜치 등)

핵심 키워드

7.1 하나하나 확인하고 보고 싶을 때, 일반 모드

한 줄 요약

일반 모드는 클로드 코드가 수정 사항을 제안하면 개발자가 하나씩 확인하고 승인/거부하는 기본 모드로, 학습과 제어에 최적이다.

쉬운 설명 (요리사 비유)

일반 모드 = 요리 초보가 레시피를 보며 한 단계씩 확인하는 것

❌ "알아서 요리해줘" → 뭘 넣었는지 모름, 맛이 이상해도 원인 파악 불가
✅ "소금 1스푼 넣을까요?" → "네!" → 다음 단계 → 직접 통제!

→ 클로드 코드가 "이렇게 수정할까요?" 물어보면
  내가 확인하고 결정하는 것!

일반 모드의 3가지 응답 옵션

일반 모드가 유용한 5가지 상황

1. 새 라이브러리/프레임워크 도입 시 — 기본 사용법을 익히면서 배울 때
2. 다양한 알고리즘 아이디어 탐색 — 특정 로직 구현 방법을 비교할 때
3. 오류 메시지 분석 — 발생한 에러의 의미를 정확히 이해하고 싶을 때
4. 코드 리뷰 용도 — 자신의 코드에 대한 제3자 의견을 구할 때
5. 클로드 코드를 아직 신뢰하지 못할 때 — 하나씩 내가 컨트롤하고 싶을 때

실무 예제 — IDE Diff 연동으로 수정 내용 확인

[일반 모드 + IDE 플러그인 활용 흐름]

1. 클로드 코드에게 수정 요청
   > "crypto-ranking-board.tsx의 제목을 한글로 변경해줘"

2. 클로드 코드가 수정 제안 (Diff 형태로 표시)
   130  130  | <span className="text-
   131  131  | </div>
   132    -  | Cryptocurrency Rankings     ← 삭제될 줄
     132  + | 암호화폐 순위                 ← 추가될 줄
   133  133  | </CardTitle>

3. 개발자가 확인 후 Yes/No 선택
   → Yes: 수정 적용
   → No: "영어를 유지하되 부제목에 한글 추가해줘" 등 재지시

주의사항

❌ 매번 일반 모드만 사용하는 것:
→ 클로드 코드 성능의 1%만 활용하는 것!
→ 학습·디버깅에는 좋지만, 생산성은 낮다

✅ 일반 모드로 충분히 익힌 뒤:
→ 자동 수정 모드나 플래닝 모드를 적극 활용!

핵심 체크포인트

• [ ] 일반 모드는 클로드 코드의 기본 상태이며, 처음 실행하면 일반 모드로 시작한다
• [ ] 수정 제안 시 Yes / Shift+Tab(자동 승인) / Esc(거부) 3가지 옵션이 제공된다
• [ ] IDE 플러그인과 연동하면 Diff로 수정 내용을 시각적으로 확인할 수 있다
• [ ] 매번 일반 모드만 사용하면 클로드 코드 성능의 1%만 활용하는 것과 같다

7.2 반복 작업에 유용한, 자동 수정 모드

한 줄 요약

자동 수정 모드는 클로드 코드가 사용자 허락 없이 직접 코드를 수정하는 모드로, 반복 작업과 명확한 요구사항이 있을 때 생산성을 극대화한다.

쉬운 설명 (자동차 비유)

일반 모드 = 수동 기어 (매번 직접 기어 변경)
자동 수정 모드 = 자동 기어 (알아서 기어 변경)

❌ 목적지가 불분명한데 자동 기어 → 어디로 갈지 모름!
✅ 목적지가 명확할 때 자동 기어 → 빠르게 도착!

→ 요구사항이 명확하고 반복적일 때만 자동 수정 모드를 쓴다

자동 수정 모드 전환 방법

일반 모드에서 Shift + Tab 을 누른다
→ 대화창 아래에 'auto-accept edits on' 메시지가 나타나면 전환 완료!

> ▌
▸▸ auto-accept edits on (shift+tab    ⊞ In
to cycle)                              crypto-ranking-board.tsx

자동 수정 모드가 적합한 5가지 상황

1. 변수명/함수명/클래스명 일괄 변경 — 프로젝트 전반에 걸친 리네이밍
2. 코드 리팩터링 — 기존 코드를 최신 패턴이나 스타일 가이드에 맞추기
3. JSDoc 등 문서 작업 — 함수/클래스에 주석 추가
4. 단순한 작업 반복 — 동일 패턴의 작업을 여러 파일에 적용
5. 테스트 코드 작성 — 프로젝트 규모와 무관하게 잘 동작함

실무 예제 — 테스트 코드 자동 생성

[자동 수정 모드로 테스트 코드 생성]

> 현재 프로젝트에 테스트코드를 추가해줘

● 프로젝트에 테스트 코드를 추가하겠습니다.

● Update Todos
  └ □ 프로젝트의 현재 상태 확인 및 테스트 프레임워크 결정
    □ 테스트 프레임워크 및 필요한 패키지 설치
    □ crypto-ranking-board 컴포넌트 테스트 작성
    □ Jest 설정 파일 생성
    □ 유틸리티 함수 테스트 작성

→ 클로드 코드가 알아서 파일 생성, 패키지 설치, 테스트 작성까지 진행!

자동 수정 모드 주의사항

⚠️ 자동 수정 모드의 위험:
개발자와 클로드 코드의 의도가 일치하지 않을 수 있다!

⚠️ 콘텍스트 윈도우 제한:
자동 수정 모드에서도 콘텍스트 제한을 넘기면 클로드 코드는 흐름을 잃는다!

✅ 자동 수정 모드 사용 원칙:
1. 작업 자체가 긴 콘텍스트를 필요로 하지 않을 것
2. 단순 반복 작업일 것
3. 명확한 PRD(요구사항 문서)가 이미 정리되어 있을 것
4. 테스트 코드는 아무리 방대해도 OK (프로젝트를 망치지 않음)

핵심 체크포인트

• [ ] Shift+Tab으로 자동 수정 모드로 전환한다 ('auto-accept edits on' 메시지 확인)
• [ ] 사용자 허락 없이 직접 코드를 수정하므로 주의가 필요하다
• [ ] 콘텍스트 윈도우 제한을 넘기면 클로드 코드가 흐름을 잃을 수 있다
• [ ] 테스트 코드 작성은 자동 수정 모드와 궁합이 매우 좋다

7.3 가장 강력한 기능, 플래닝 모드

한 줄 요약

플래닝 모드는 코드를 작성하지 않고 소프트웨어의 구조와 개발 계획을 수립하는 모드로, 저자가 클로드 코드의 가장 핵심적인 기능이라고 강조한다.

쉬운 설명 (건축 비유)

플래닝 모드 = 건물 짓기 전에 설계도를 그리는 것

❌ 설계도 없이 바로 건축 → 구조 불안정, 나중에 다 뜯어고침
✅ 설계도 먼저 완성 → 체계적으로 시공 → 안정적인 건물!

→ 코드를 작성하기 전에 "뭘 만들지" 계획부터 세우는 것!

플래닝 모드 전환 방법

Shift + Tab 을 눌러 사이클을 돌린다

일반 모드 → 자동 수정 모드 → 플래닝 모드 → 일반 모드 → ...

채팅창 아래에 'plan mode on' 메시지가 나타나면 전환 완료!

> ▌
‖ plan mode on (shift+tab to cycle)                    ○

플래닝 모드 사용법 — 개방적 질문 던지기

✅ 플래닝 모드에 적합한 질문:
"인증 시스템을 구현하고 싶은데 어떻게 하면 좋을까?
 몇 가지 방법을 추천해줘"

→ 클로드 코드가 체계적인 계획을 제시:
  1. NextAuth.js 설치 및 기본 설정
  2. 인증 제공자 설정 (Google OAuth, GitHub OAuth 등)
  3. 세션 관리 구현
  4. UI 컴포넌트 생성
  5. 데이터베이스 연동
  6. 보안 강화

→ "이 계획을 진행하시겠습니까?" 질문이 나옴

[Yes]를 바로 누르지 마세요! (핵심 노하우)

⚠️ 저자의 핵심 조언:
"저는 첫 번째 플랜에 [Yes]를 바로 선택하지 않는 것을 추천합니다"

[플래닝 모드 최적 활용 흐름]

1단계: 개방적 질문 던지기
  → "인증 시스템 구현하고 싶은데 추천해줘"

2단계: 첫 번째 계획 확인
  → Would you like to proceed?
  → ❌ [Yes] 바로 누르기
  → ✅ [No, keep planning] 선택!

3단계: 더 구체적인 요구사항 추가
  → "Prisma + PostgreSQL로 하고, Zustand로 인증 상태 관리해줘"

4단계: 강화된 계획 확인
  → 패키지, 모델 정의, 라우트, 미들웨어, UI까지 상세 계획 제시
  → 다시 확인하고 [No] 또는 [Yes] 선택

5단계: 만족할 만큼 구체화되면 [Yes]

[Yes]를 바로 누르면 안 되는 3가지 이유

실무 예제 — 인증 시스템 플래닝 과정

[1차 플랜 — 막연한 계획]

NextAuth.js를 사용한 인증 시스템 구현 계획
1. NextAuth.js 설치 및 기본 설정
2. 인증 제공자 설정
   - Google OAuth (가장 일반적)
   - GitHub OAuth (개발자 친화적)
   - 이메일/비밀번호 인증 옵션
→ 어떤 DB를 쓸지, 어떤 상태관리를 할지 불명확!
→ [No, keep planning] 선택하여 구체화!

[2차 플랜 — 구체적인 계획]
(요구사항: "Prisma + PostgreSQL, Zustand 사용해줘")

Prisma + PostgreSQL (Supabase) 인증 시스템 구현 계획
1. 필요한 패키지 설치
   - @prisma/client, prisma — ORM
   - bcryptjs — 비밀번호 해싱
   - jsonwebtoken — JWT 토큰 생성/검증
2. Supabase 프로젝트 설정
   - PostgreSQL 연결 URL 획득
   - 환경 변수 설정 (.env.local)
3. Supabase 클라이언트 설정
4. Zustand 스토어 구현 — 인증 상태 관리
   - user 상태, loading 상태
   - signIn, signUp, signOut 액션
5. 인증 Provider 구현
6. UI 컴포넌트 생성
7. 페이지 생성
8. 미들웨어 설정
9. 레이아웃 업데이트
→ 매우 구체적! 이 정도면 [Yes] 선택해도 OK!

계획이 너무 클 때 — 작업 분할 전략

⚠️ 계획이 너무 큰 경우:
→ 제어할 수 있는 범위 내에서 작업을 나눠 진행하는 것이 좋다!

✅ 깃허브 이슈 분할 전략:
큰 계획을 하나의 이슈로 만들지 말고 분할한다:
1. 이메일 인증 → 이슈 #1
2. Google OAuth 인증 → 이슈 #2
3. GitHub OAuth 인증 → 이슈 #3

→ 하나로 생성하면 콘텍스트가 터지고, 분할하면 효율적!

클로드 코드 = 코딩 파트너

실제 클로드 코드는 코딩 파트너와 함께 협업하는 것과 같다.

❌ "알아서 다 해줘" → 의도와 다른 결과
✅ "이런 기술 쓰고, 이런 구조로 하고, 이 범위만 해줘"
  → 작업 규모를 제시하고 협업해야 효율적!

핵심 체크포인트

• [ ] 플래닝 모드는 코드를 작성하지 않고 계획만 세우는 모드이다
• [ ] 막연히 구현할 기능이 있을 때는 일단 플래닝 모드로 진입한다
• [ ] 첫 번째 플랜에 [Yes]를 바로 누르지 않고 [No, keep planning]으로 구체화한다
• [ ] 계획이 너무 크면 작업을 분할하여 이슈 단위로 나눈다
• [ ] 저자는 플래닝 모드를 클로드 코드의 "가장 핵심적인 기능"이라 평가한다

연습 문제

문제 1: 모드 선택 판단 (기본)

다음 상황에서 어떤 모드를 사용해야 하는지 골라보세요.

문제 2: 플래닝 모드 실전 (중급)

아래는 클로드 코드의 플래닝 모드에서 받은 첫 번째 계획입니다. 이 계획에서 발견할 수 있는 문제점 3가지를 찾고, [No, keep planning]과 함께 어떤 추가 요구사항을 입력할지 작성하세요.

블로그 시스템 구현 계획
1. Next.js + TypeScript 기본 설정
2. 데이터베이스 연동 (MongoDB or PostgreSQL)
3. 인증 시스템 (NextAuth.js)
4. 게시글 CRUD
5. 댓글 시스템
6. 태그/카테고리
7. 검색 기능
8. SEO 최적화
9. 다크모드
10. 반응형 디자인

문제 3: 모드 전환 순서 (기본)

Shift+Tab을 누를 때마다 모드가 어떤 순서로 전환되는지 빈칸을 채우세요.

(   ) 모드 → (   ) 모드 → (   ) 모드 → (   ) 모드 → ...

( 일반 ) 모드 → ( 자동 수정 ) 모드 → ( 플래닝 ) 모드 → ( 일반 ) 모드 → ...

부록 A — 용어 사전

부록 B — 비교표

3가지 모드 종합 비교

상황별 모드 추천 가이드

부록 C — 참고 자료